<!-- 统计分析 - 数据目录 -->
<script>
import { defineComponent, createApp, h } from 'vue';
import GlobalCard from '@/components/GlobalCard/global-card.vue';
import OverLay from './overLay.vue';
import MITT_BUS from "@/utils/mitt";
function getRandomNum(max, min) {
  return (Math.random() * (max - min) + min).toFixed(2)
}
function getRandomStatus() {
  let random_ = Math.random()
  if (random_ < 0.333) {
    return {
      status: 'icon-status status-ing',
      statusName: '运行中',
    }
  } else if (random_ < 0.666) {
    return {
      status: 'icon-status status-pass',
      statusName: '待机',
    }
  } else {
    return {
      status: 'icon-status status-error',
      statusName: '故障',
    }
  }
}
export default defineComponent({
  name: "SectionOne",
  components: {
    GlobalCard,
    OverLay
  },
  setup() {
  },
  data() {
    return {
      sourceName: "",
      data_1: 25,
      data_2: 12,
      data_3: 7,
      // 换热站数据
      listData: [],
      // 供热站数据
      listDataStrAll: [],
      timer: null,
      activeId: 'tem-press',
      listTabData: [{
        name: '温度压力',
        id: 'tem-press'
      }, {
        name: '设备监测',
        id: 'shebei'
      }],
      showOverLay: false,
      mainTitle: '',
      mainTab: 'temp',
      activeTab: ''
    }
  },
  mounted() {
    this.init();
  },
  unmounted() {
    this.clearScroll();
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    doSearch() {
      const data = JSON.parse(this.listDataStrAll);
      this.listData = data.filter(v => {
        return v.name.indexOf(this.sourceName) !== -1
      });
    },
    setRowStyle({ row }) {
      if (Math.random() < 0.5) {
        return "special-row";
      }
      return '';
    },
    clearScroll() {
      clearInterval(this.timer)
      this.timer = null
    },
    createScroll() {
      this.clearScroll()
      // 拿到 table
      const table = this.$refs['self-table-section-1'].layout.table.refs
      // 拿到可以滚动的元素
      const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild
      this.timer = setInterval(() => {
        tableWrapper.scrollTop += 1
        // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
        // console.log(tableWrapper.clientHeight + tableWrapper.scrollTop, tableWrapper.scrollHeight)
        // 添加容差
        if (Math.abs(tableWrapper.clientHeight + tableWrapper.scrollTop - tableWrapper.scrollHeight) < 1) {
          tableWrapper.scrollTop = 0
        }
      }, 100)

    },
    init() {
      this.listData = []
      Api.getDataOfGRZ({
        ids: [],
        fields: ['SMID', 'DWMC', 'ZDMC', 'RYDZ', 'MC', 'QS', 'SHAPE_AREA', 'ZJBM']
      }).then(res => {
        res.features.forEach(e => {
          let statusGMJ = getRandomStatus();
          let statusPDJ = getRandomStatus();
          let data = Object.assign(e.properties, {
            // 名称
            name: e.properties.ZDMC,
            // 出厂温度
            tempOut: getRandomNum(140, 130),
            // 出厂压力
            pressOut: getRandomNum(1.5, 1.1),
            // 回厂温度
            tempBack: getRandomNum(90, 75),
            // 回厂压力
            pressBack: getRandomNum(0.8, 0.5),
            // 锅炉内温度
            glTemp: getRandomNum(120, 110),
            // 锅炉内压力
            glPress: getRandomNum(1.5, 0.5),
            // 给煤机状态
            gmjStatus: statusGMJ.status,
            gmjStatusName: statusGMJ.statusName,

            pdjStatus: statusPDJ.status,
            pdjStatusName: statusPDJ.statusName,
            // 地理信息
            coordinates: e.geometry.coordinates
          })
          this.listData.push(data)
          this.listDataStrAll = JSON.stringify(this.listData)
        });
        this.createScroll();
      });
    },

    clickData(row) {
      const polygon = turf.polygon(row.coordinates[0]);
      const centerPoint = turf.centroid(polygon);

      MAIN_STORE.GLOBAL_MAP_INS && MAIN_STORE.GLOBAL_MAP_INS.getView().animate({
        zoom: 17,
        center: centerPoint.geometry.coordinates
      })
      this.$MITT_BUS.emit('recive-tabledata', {
        type: 'reyuanzhan',
        data: row.SMID,
        center: row.coordinates
      })
      // 传递消息
      this.$MITT_BUS.emit('send-gongrezhan-single-data', {
        data: row.ZJBM
      })
    },
    showOverlay(row, tab) {
      // this.mainTitle = row.name;
      // this.mainTab = tab;
      // this.showOverLay = true;
      // this.activeTab = this.activeId

      this.$MITT_BUS.emit('listen-reyuan-chart', {
        mainTitleHide: row.name,
        activeTab: this.activeId,
        mainTab: tab
      })
    },
    setSelect(e) {
      this.activeId = e;
    }
  }
});
</script>
<template>
  <div class="section-one">
    <GlobalCard :mainTitle="'热源'" :activeId="activeId" :showSelect="true" :listData="listTabData"
      @change="(e) => { setSelect(e) }">
      <template #body>
        <!-- 代码 -->
        <div class="main-search">
          <el-input @keyup.enter="doSearch" class="real-input" v-model="sourceName" placeholder="请输入热源名称"
            :suffix-icon="'Search'">
          </el-input>
        </div>
        <div id="Gongrezhan">
          <!-- 搜索域 show-overflow-tooltip -->
          <el-table :empty-text="'暂无数据'" ref="self-table-section-1" class="self-table-section-1" :data="listData"
             style="width: 100%;
             padding-right: 10px" height="100%" header-row-class-name="main-table-header" :row-class-name="setRowStyle"
             @mouseover.native="clearScroll" @mouseleave.native="createScroll" @row-clicks="clickData">
            <el-table-column type="index" label="序号" width="30" align='left' />
            <el-table-column prop="name" label="热源名" align='left'>
              <template #default="scope">
                <span class="font-AlibabaPuhui" @click="clickData(scope.row)">{{ scope.row.name }}</span>
              </template>
            </el-table-column>

            <el-table-column v-if="activeId === 'shebei'" prop="gmjStatusName" :label="'给煤机\n状态'" width="80" align='left'>
              <template #default="scope">
                <span class="font-AlibabaPuhui" :class="[scope.row.gmjStatus]">{{ scope.row.gmjStatusName }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="activeId === 'shebei'" prop="pdjStatusName" :label="'皮带机\n状态'" width="80" align='left'>
              <template #default="scope">
                <span class="font-AlibabaPuhui" :class="[scope.row.pdjStatus]">{{ scope.row.pdjStatusName }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="activeId === 'shebei'" prop="glTemp" :label="'锅炉内\n温度(℃)'" width="80" align='center'>
              <template #default="scope">
                <span class="font-AlibabaPuhui"  @click.self="showOverlay(scope.row, 'temp')">{{ scope.row.glTemp }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="activeId === 'shebei'" prop="glPress" :label="'锅炉内\n压力(MPA)'" width="80" align='center'>
              <template #default="scope">
                <span class="font-AlibabaPuhui"  @click.self="showOverlay(scope.row, 'press')">{{ scope.row.glPress }}</span>
              </template>
            </el-table-column>

            <el-table-column v-if="activeId === 'tem-press'" prop="tempOut" :label="'出厂温度\n(℃)'" width="80" align='center'>
              <template #default="scope">
                <span class="font-AlibabaPuhui" @click.self="showOverlay(scope.row, 'temp')">{{ scope.row.tempOut }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="activeId === 'tem-press'" prop="pressOut" :label="'出厂压力\n(MPA)'" width="80" align='center'>
              <template #default="scope">
                <span class="font-AlibabaPuhui"  @click.self="showOverlay(scope.row, 'press')">{{ scope.row.pressOut }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="activeId === 'tem-press'" prop="tempBack" :label="'回厂温度\n(℃)'" width="80" align='center'>
              <template #default="scope">
                <span class="font-AlibabaPuhui" @click.self="showOverlay(scope.row, 'temp')">{{ scope.row.tempBack }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="activeId === 'tem-press'" prop="pressBack" :label="'回厂压力\n(MPA)'" align='center'>
              <template #default="scope">
                <span class="font-AlibabaPuhui"  @click.self="showOverlay(scope.row, 'press')">{{ scope.row.pressBack }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </GlobalCard>
<!--    <OverLay :activeTab="activeTab" :mainTitle="mainTitle" :mainTab="mainTab" @close="() => { showOverLay = false }" v-if="showOverLay"></OverLay>-->
  </div>
</template>
<style>
.el-table.self-table-section-1 th .cell {
  white-space: pre-line;
  /* 保留换行符 */
  line-height: 1
}

.el-table.self-table-section-1 {
  background-color: rgba(0, 0, 0, 0);
  color: #fff;
  padding-right: 0 !important;
}

.el-table.self-table-section-1 .el-table__cell {
  padding: 5px 0;
}

.el-table.self-table-section-1 .el-table__header .cell {
  color: #0bf9fe;
  font-weight: 100;
  padding: 0;
  text-align: center;
  font-size: 12px;
  font-family: "FANGZHENG-BLACK" !important;
}

.el-table.self-table-section-1 th.el-table__cell {
  background-color: rgba(21, 77, 160, 0.2);
}

.el-table.self-table-section-1 tr {
  background-color: transparent;
}

.el-table.self-table-section-1 tr:hover {
  cursor: pointer;
}

.el-table.self-table-section-1.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  background-color: transparent;
}

.el-table.self-table-section-1.el-table--enable-row-hover .el-table__body tr:hover {
  background-image: linear-gradient(270deg,
      rgba(26, 123, 230, 0) 0%,
      rgba(69, 193, 255, 0.9) 100%);
}

.el-table.self-table-section-1.el-table--enable-row-transition .el-table__body td.el-table__cell {
  border-bottom: none;
}

.el-table.self-table-section-1.el-table--fit .el-table__inner-wrapper:before {
  display: none;
}

.el-table.self-table-section-1 td.el-table__cell,
.el-table.self-table-section-1 th.el-table__cell.is-leaf {
  border-bottom: none;
}

.main-search .el-input__wrapper {
  background-color: rgba(4, 87, 177, 0.2);
  box-shadow: 0 0 0 1px #1d68be inset;
}

.main-search .el-input__inner {
  color: #fff;
}

.self-popover.el-popper.is-light,
.self-popover.el-popper.is-light>.el-popper__arrow:before {
  background-color: rgba(0, 24, 50, 0.9);
  border: 1px solid #1d68be;
}

.self-popover.el-popover.el-popper {
  color: #fff;
}

.content.real-date .el-range-editor.el-input__wrapper {
  box-shadow: none;
}

.content.real-date .el-date-editor .el-range-input {
  color: #fff;
}

.self-date-picker.el-popper {
  border: 1px solid #1d68be;
}

.self-date-picker .el-date-range-picker {
  background-color: rgba(0, 24, 50, 0.9);
}

.self-date-picker .el-date-range-picker {
  --el-datepicker-inner-border-color: rgba(0, 0, 0, 0);
}

.real-date .el-input__wrapper {
  background-color: rgba(4, 87, 177, 0.2);
}

.self-date-picker .el-date-table td.in-range .el-date-table-cell {
  background-color: rgba(22, 112, 247, 0.3);
}

.self-date-picker .el-picker-panel {
  color: #fff;
}

/* @keyframes breathing {
  0% {
    transform: translate(-100%)
  }

  100% {
    transform: translate(100%);
  }
} */


.el-table.self-table-section-1.el-table--enable-row-hover .el-table__body tr.special-row {
  position: relative;
}

/* .el-table.self-table-section-1.el-table--enable-row-hover .el-table__body tr.special-row:after {
  content: "";
  position: absolute;
  z-index: 10;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(-30deg, rgba(0, 0, 0, 0) 0%, rgba(150, 27, 27, 0.5) 40%, rgba(150, 27, 27, 0.5) 60%, rgba(0, 0, 0, 0) 100%);
  animation: breathing 3s infinite ease;
} */
</style>
<style scoped lang="less">
span.icon-status {
  position: relative;
  margin-left: 1rem;

  &::before {
    content: " ";
    position: absolute;
    top: 1rem;
    left: -1rem;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;

  }

  &.status-ing::before {
    background-color: #02ff7f;
  }

  &.status-pass::before {
    background-color: #c9cdd4;
  }

  &.status-error::before {
    background-color: #f93030;
  }
}

.near-normal {
  color: #f93030;

  &.is-near-date {
    color: #02ff7f;
  }
}

.section-one {
  position: fixed;
  top: 11rem;
  left: 2rem;
}

.main-search {
  display: flex;
  justify-content: center;

  .confirm-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 9rem;
    font-size: 1.5rem;
    height: 3rem;
    border-radius: .5rem;
    cursor: pointer;
    border: 1px solid #1d68be;
    background-color: rgba(4, 87, 177, 0.2);
    position: relative;
    right: 0;

    input::placeholder {
      font-size: 1.5rem;
      color: #fff;
    }

  }
}

#Gongrezhan {
  width: 100%;
  height: 38rem;
}
</style>